<script>

    const data = {
        tableData : [
            {
                title : 'PHP基础',
                lesson_count : 100,
                watch_count : 200,
                operation : '修改 删除'
            },
            {
                title : 'JAVA基础',
                lesson_count : 50,
                watch_count : 100,
                operation : '修改 删除'
            },
            {
                title : 'UI设计',
                lesson_count : 30,
                watch_count : 80,
                operation : '修改 删除'
            },
            {
                title : 'IOS开发',
                lesson_count : 40,
                watch_count : 65,
                operation : '修改 删除'
            },
            {
                title : 'JAVASCRIPT基础',
                lesson_count : 40,
                watch_count : 300,
                operation : '修改 删除'
            },
            {
                title : '嵌入式开发',
                lesson_count : 40,
                watch_count : 80,
                operation : '修改 删除'
            },
            {
                title : 'PHP基础',
                lesson_count : 100,
                watch_count : 200,
                operation : '修改 删除'
            },
            {
                title : 'PHP基础',
                lesson_count : 100,
                watch_count : 200,
                operation : '修改 删除'
            },
            {
                title : 'PHP基础',
                lesson_count : 100,
                watch_count : 200,
                operation : '修改 删除'
            }
        ]
    };

    export default {
        data() {
            return data;
        },
        methods: {
            my_click() {
                data.test = 'aaaa';
            }
        }
    };
</script>

<template>
    <div id="content">
        <div class="search">
            <form>
                <el-input  placeholder="请输入课程标题"  icon="search" class="search_input">
                </el-input>
            </form>
        </div>
        <div class="course_list">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column
                        prop="title"
                        label="课程标题">
                </el-table-column>
                <el-table-column
                        prop="lesson_count"
                        label="课时总数">
                </el-table-column>
                <el-table-column
                        prop="watch_count"
                        label="观看次数">
                </el-table-column>
                <el-table-column
                        prop="operation"
                        label="操作"
                        width="120">
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination
                    layout="prev, pager, next"
                    :total="50"
                    page-size="10">
            </el-pagination>
        </div>
    </div>

</template>

<style scoped>
    #content {
        margin-top:20px;
        margin-left:20px;
    }
    #content .search {
        text-align: center;
    }
    #content .search_input {
        width:300px;
    }
    #content .course_list {
        margin: 20px 0;
    }
    #content .block {
        text-align: right;
    }
</style>